<template>
	<div class="page-total">
		<div class="page-total-item" v-for="i in config" :key="i.key+i.title">
			<div class="page-total-item-num" :style="{color: i.color}">
				{{value[i.key]}} <text style="font-size: .5em;">{{i.unit}}</text>
			</div>
			<div class="page-total-item-title">{{i.title}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "grid-box",
		props:['config','value']
	}
</script>

<style lang="scss" scoped>
	.page-total {
		display: flex;

		&-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			text-align: center;
			font-size: 28rpx;
			color: #666;

			&-num {
				font-size: 2em;
				margin-bottom: 20rpx;
				font-weight: 600;
			}
		}
	}
</style>